<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用指南 - 学知题库</title>
    <link href="../assets/css/app.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script src="../assets/js/chart.umd.min.js"></script>
    
    <!-- Tailwind 配置 - 已合并到公共配置文件 -->
    <!-- 
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    -->
    
    <!-- 工具类样式 - 已合并到 src/input.css -->
    <!-- 
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.08);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0E42B3 100%);
            }
            .progress-ring-circle {
                transition: stroke-dashoffset 0.35s;
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
        }
    </style>
    -->
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <a href="#" class="flex items-center">
                    <i class="fa fa-graduation-cap text-primary text-2xl mr-2"></i>
                    <h1 class="text-xl font-bold text-gray-800">学知题库</h1>
                </a>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">题库</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">学习路径</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">模拟考试</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">关于我们</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">联系我们</a>
                <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">使用指南</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索使用指南..." 
                           class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <div class="flex space-x-2">
                    <button class="px-4 py-2 bg-white text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors">登录</button>
                    <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">注册</button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区（使用指南页面） -->
    <main class="flex-1 py-8 bg-gray-50">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mb-8">
                <h2 class="text-2xl font-bold text-gray-800">使用指南</h2>
                <p class="text-gray-500 mt-1">详细了解如何使用学知题库的各项功能</p>
            </div>
            
            <!-- 功能分类导航 -->
            <div class="mb-8">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <a href="#registration" class="bg-white rounded-xl shadow-sm p-4 text-center card-hover">
                        <div class="text-primary text-3xl mb-2">
                            <i class="fa fa-user-plus"></i>
                        </div>
                        <h3 class="font-medium">账号注册</h3>
                    </a>
                    
                    <a href="#question-bank" class="bg-white rounded-xl shadow-sm p-4 text-center card-hover">
                        <div class="text-primary text-3xl mb-2">
                            <i class="fa fa-book"></i>
                        </div>
                        <h3 class="font-medium">题库使用</h3>
                    </a>
                    
                    <a href="#learning-path" class="bg-white rounded-xl shadow-sm p-4 text-center card-hover">
                        <div class="text-primary text-3xl mb-2">
                            <i class="fa fa-road"></i>
                        </div>
                        <h3 class="font-medium">学习路径</h3>
                    </a>
                    
                    <a href="#mock-exam" class="bg-white rounded-xl shadow-sm p-4 text-center card-hover">
                        <div class="text-primary text-3xl mb-2">
                            <i class="fa fa-file-text-o"></i>
                        </div>
                        <h3 class="font-medium">模拟考试</h3>
                    </a>
                    
                    <a href="#personal-center" class="bg-white rounded-xl shadow-sm p-4 text-center card-hover">
                        <div class="text-primary text-3xl mb-2">
                            <i class="fa fa-user-circle"></i>
                        </div>
                        <h3 class="font-medium">个人中心</h3>
                    </a>
                    
                    <a href="#favorites" class="bg-white rounded-xl shadow-sm p-4 text-center card-hover">
                        <div class="text-primary text-3xl mb-2">
                            <i class="fa fa-star"></i>
                        </div>
                        <h3 class="font-medium">我的收藏</h3>
                    </a>
                    
                    <a href="#wrong-questions" class="bg-white rounded-xl shadow-sm p-4 text-center card-hover">
                        <div class="text-primary text-3xl mb-2">
                            <i class="fa fa-exclamation-circle"></i>
                        </div>
                        <h3 class="font-medium">错题本</h3>
                    </a>
                    
                    <a href="#settings" class="bg-white rounded-xl shadow-sm p-4 text-center card-hover">
                        <div class="text-primary text-3xl mb-2">
                            <i class="fa fa-cog"></i>
                        </div>
                        <h3 class="font-medium">设置</h3>
                    </a>
                </div>
            </div>
            
            <!-- 详细使用指南 -->
            <div class="space-y-8">
                <!-- 账号注册指南 -->
                <section id="registration" class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fa fa-user-plus text-primary mr-2"></i>
                            账号注册与登录
                        </h3>
                        
                        <div class="space-y-6">
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">1</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">进入注册页面</h4>
                                    <p class="text-gray-600 mb-3">打开学知题库网站或APP，点击页面右上角的"注册"按钮，进入注册页面。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=1" alt="注册按钮位置" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">2</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">选择注册方式</h4>
                                    <p class="text-gray-600 mb-3">您可以选择使用手机号或电子邮箱注册，输入相应的信息并设置密码。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=2" alt="注册方式选择" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">3</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">验证并完成注册</h4>
                                    <p class="text-gray-600 mb-3">输入验证码进行身份验证，阅读并同意《用户协议》和《隐私政策》后，点击"注册"完成账号创建。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=3" alt="完成注册" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">4</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">完善个人信息</h4>
                                    <p class="text-gray-600 mb-3">注册成功后，您可以进入个人中心，完善个人信息，如头像、昵称、年级、学科偏好等。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=4" alt="完善个人信息" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 题库使用指南 -->
                <section id="question-bank" class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fa fa-book text-primary mr-2"></i>
                            题库使用指南
                        </h3>
                        
                        <div class="space-y-6">
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">1</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">进入题库页面</h4>
                                    <p class="text-gray-600 mb-3">在导航栏中点击"题库"按钮，进入题库页面。您可以看到各种学科和分类的题目。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=5" alt="题库页面" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">2</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">选择学科和分类</h4>
                                    <p class="text-gray-600 mb-3">根据您的学习需求，选择相应的学科和分类，如数学、语文、英语等，以及具体的章节或题型。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=6" alt="选择学科分类" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">3</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">筛选题目</h4>
                                    <p class="text-gray-600 mb-3">使用筛选功能，根据难度、年份、题型等条件进一步筛选题目，找到符合您需求的题目。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=7" alt="筛选题目" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">4</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">开始做题</h4>
                                    <p class="text-gray-600 mb-3">点击题目进入做题页面，选择答案后提交，系统会立即显示答案和解析。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=8" alt="做题页面" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">5</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">查看解析和收藏题目</h4>
                                    <p class="text-gray-600 mb-3">做题后，您可以查看详细的解析和解题思路。对于重要的题目，您可以点击"收藏"按钮将其加入收藏夹。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=9" alt="查看解析" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 学习路径指南 -->
                <section id="learning-path" class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fa fa-road text-primary mr-2"></i>
                            学习路径指南
                        </h3>
                        
                        <div class="space-y-6">
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">1</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">进入学习路径页面</h4>
                                    <p class="text-gray-600 mb-3">在导航栏中点击"学习路径"按钮，进入学习路径页面。您可以看到系统推荐的各种学习路径。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=10" alt="学习路径页面" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">2</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">选择适合的学习路径</h4>
                                    <p class="text-gray-600 mb-3">根据您的学习目标和当前水平，选择一条适合的学习路径，如"中考冲刺"、"高考备战"、"知识点强化"等。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=11" alt="选择学习路径" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">3</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">查看学习路径详情</h4>
                                    <p class="text-gray-600 mb-3">点击学习路径进入详情页面，了解路径包含的阶段、知识点和学习目标。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=12" alt="学习路径详情" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">4</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">开始学习</h4>
                                    <p class="text-gray-600 mb-3">点击"开始学习"按钮，按照学习路径的顺序进行学习。每个阶段包含多个知识点和练习题。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=13" alt="开始学习" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">5</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">查看学习进度</h4>
                                    <p class="text-gray-600 mb-3">在学习过程中，您可以随时查看学习进度和完成情况，了解自己的学习状态。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=14" alt="学习进度" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 模拟考试指南 -->
                <section id="mock-exam" class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fa fa-file-text-o text-primary mr-2"></i>
                            模拟考试指南
                        </h3>
                        
                        <div class="space-y-6">
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">1</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">进入模拟考试页面</h4>
                                    <p class="text-gray-600 mb-3">在导航栏中点击"模拟考试"按钮，进入模拟考试页面。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=15" alt="模拟考试页面" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">2</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">选择考试类型</h4>
                                    <p class="text-gray-600 mb-3">根据您的需求，选择相应的考试类型，如单元测试、期中/期末考试、高考模拟等。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=16" alt="选择考试类型" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">3</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">设置考试参数</h4>
                                    <p class="text-gray-600 mb-3">设置考试的题目数量、难度、时间限制等参数，然后点击"开始考试"按钮。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=17" alt="设置考试参数" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">4</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">进行考试</h4>
                                    <p class="text-gray-600 mb-3">在考试时间内完成所有题目，系统会自动计时并保存您的答案。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=18" alt="进行考试" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">5</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">查看考试结果</h4>
                                    <p class="text-gray-600 mb-3">考试结束后，系统会自动生成成绩报告，包括总分、各题型得分、正确率等信息。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=19" alt="查看考试结果" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-start gap-6">
                                <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold flex-shrink-0">6</div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-medium mb-2">查看错题解析</h4>
                                    <p class="text-gray-600 mb-3">点击错题可以查看详细的解析和解题思路，帮助您理解错误原因。</p>
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <img src="https://picsum.photos/800/400?random=20" alt="查看错题解析" class="rounded-lg w-full">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 更多功能指南 -->
                <section id="more-features" class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fa fa-cogs text-primary mr-2"></i>
                            更多功能指南
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 个人中心 -->
                            <div>
                                <h4 class="text-lg font-medium mb-4 flex items-center">
                                    <i class="fa fa-user-circle text-primary mr-2"></i>
                                    个人中心
                                </h4>
                                <p class="text-gray-600 mb-3">个人中心是您管理账号信息和查看学习数据的地方。在这里，您可以：</p>
                                <ul class="space-y-2 mb-4 pl-5 list-disc text-gray-600">
                                    <li>查看和编辑个人信息，如头像、昵称、联系方式等</li>
                                    <li>查看学习统计数据，如学习时长、做题数量、正确率等</li>
                                    <li>管理账号安全设置，如修改密码、绑定手机号等</li>
                                    <li>查看和管理我的收藏、错题本等</li>
                                </ul>
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <img src="https://picsum.photos/600/300?random=21" alt="个人中心" class="rounded-lg w-full">
                                </div>
                            </div>
                            
                            <!-- 我的收藏 -->
                            <div>
                                <h4 class="text-lg font-medium mb-4 flex items-center">
                                    <i class="fa fa-star text-primary mr-2"></i>
                                    我的收藏
                                </h4>
                                <p class="text-gray-600 mb-3">我的收藏是您保存重要题目的地方。在这里，您可以：</p>
                                <ul class="space-y-2 mb-4 pl-5 list-disc text-gray-600">
                                    <li>查看所有收藏的题目</li>
                                    <li>对收藏的题目进行分类管理</li>
                                    <li>随时复习收藏的题目</li>
                                    <li>取消收藏不再需要的题目</li>
                                </ul>
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <img src="https://picsum.photos/600/300?random=22" alt="我的收藏" class="rounded-lg w-full">
                                </div>
                            </div>
                            
                            <!-- 错题本 -->
                            <div>
                                <h4 class="text-lg font-medium mb-4 flex items-center">
                                    <i class="fa fa-exclamation-circle text-primary mr-2"></i>
                                    错题本
                                </h4>
                                <p class="text-gray-600 mb-3">错题本会自动收集您做错的题目。在这里，您可以：</p>
                                <ul class="space-y-2 mb-4 pl-5 list-disc text-gray-600">
                                    <li>查看所有错题，按学科、时间等分类</li>
                                    <li>查看错题的正确答案和解析</li>
                                    <li>标记重点错题，便于重点复习</li>
                                    <li>重做错题，检验学习效果</li>
                                    <li>删除已经掌握的错题</li>
                                </ul>
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <img src="https://picsum.photos/600/300?random=23" alt="错题本" class="rounded-lg w-full">
                                </div>
                            </div>
                            
                            <!-- 设置 -->
                            <div>
                                <h4 class="text-lg font-medium mb-4 flex items-center">
                                    <i class="fa fa-cog text-primary mr-2"></i>
                                    设置
                                </h4>
                                <p class="text-gray-600 mb-3">设置页面允许您自定义学知题库的使用体验。在这里，您可以：</p>
                                <ul class="space-y-2 mb-4 pl-5 list-disc text-gray-600">
                                    <li>调整界面主题和显示设置</li>
                                    <li>设置通知提醒选项</li>
                                    <li>管理账号绑定和隐私设置</li>
                                    <li>查看应用版本和检查更新</li>
                                </ul>
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <img src="https://picsum.photos/600/300?random=24" alt="设置" class="rounded-lg w-full">
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            
            <!-- 反馈和支持 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mt-8">
                <h3 class="text-lg font-medium mb-4">需要更多帮助？</h3>
                <p class="text-gray-600 mb-4">如果您在使用过程中遇到问题或有任何建议，请随时联系我们的客服团队。</p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="#" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors inline-flex items-center justify-center">
                        <i class="fa fa-envelope mr-2"></i>发送反馈
                    </a>
                    <a href="#" class="px-4 py-2 bg-white text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors inline-flex items-center justify-center">
                        <i class="fa fa-comments mr-2"></i>在线客服
                    </a>
                    <a href="#" class="px-4 py-2 bg-white text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors inline-flex items-center justify-center">
                        <i class="fa fa-phone mr-2"></i>电话咨询
                    </a>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚（沿用原有风格） -->
    <footer class="bg-gray-800 text-white py-12 mt-12">
        <div class="container mx-auto px-4">
   <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <i class="fa fa-graduation-cap text-primary text-2xl mr-2"></i>
                        <h3 class="text-xl font-bold">学知题库</h3>
                    </div>
                    <p class="text-gray-400 mb-4">智能教育资源平台，助力学生高效学习</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-qq"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">题库</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">学习路径</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">模拟考试</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">意见反馈</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i class="fa fa-map-marker text-primary mr-2"></i>
                            <span class="text-gray-400">北京市海淀区中关村大街1号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-2"></i>
                            <span class="text-gray-400">400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope text-primary mr-2"></i>
                            <span class="text-gray-400">contact@xuezhi.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-clock-o text-primary mr-2"></i>
                            <span class="text-gray-400">周一至周日 9:00-21:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2025 学知题库 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 transition-opacity duration-300 hover:bg-primary/90">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2');
                header.classList.remove('py-3');
                header.classList.add('shadow');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2');
                header.classList.remove('shadow');
            }
        });

        // 返回顶部按钮
        const backToTopButton = document.getElementById('backToTop');
        
        window.addEventListener('scroll', function() {
            if (window.scrollY > 300) {
                backToTopButton.classList.add('opacity-100');
                backToTopButton.classList.remove('opacity-0');
            } else {
                backToTopButton.classList.add('opacity-0');
                backToTopButton.classList.remove('opacity-100');
            }
        });
        
        backToTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 平滑滚动到锚点
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    const headerOffset = 80;
                    const elementPosition = targetElement.getBoundingClientRect().top;
                    const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                    
                    window.scrollTo({
                        top: offsetPosition,
                        behavior: 'smooth'
                    });
                    
                    // 移动端导航栏点击后自动收起
                    const mobileMenu = document.querySelector('.mobile-menu');
                    if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });

        // 模拟图片加载效果
        document.addEventListener('DOMContentLoaded', function() {
            const images = document.querySelectorAll('img');
            images.forEach(img => {
                img.classList.add('opacity-0', 'transition-opacity', 'duration-500');
                img.onload = function() {
                    this.classList.remove('opacity-0');
                    this.classList.add('opacity-100');
                };
                // 如果图片已经加载
                if (img.complete) {
                    setTimeout(() => {
                        img.classList.remove('opacity-0');
                        img.classList.add('opacity-100');
                    }, 100);
                }
            });
        });
    </script>
</body>
</html>



